<template>
  <div>
    <van-nav-bar :title="$t('title')"
                 left-arrow
                 @click-left="$router.back()" />
    <div class="right"
         @click="clickGeneratePicture">
      <van-icon name="share" />
    </div>

    <div class="poster"
         ref="imageDom">
      <div class="avatar-content">
        <div class="logo"><img src="@/assets/jb/logo2.png"></div>
        <div class="BMax">AISS</div>
        <div class="describe">{{$t('describe')}}</div>
      </div>
      <van-row type="flex"
               justify="space-between">
        <van-col :span="$i18n.locale === 'zh'?'11':'24'"
                 v-for="(item,index) in $t('row')"
                 :key="index">{{item}}</van-col>
      </van-row>
      <div class="invitation_code"
           v-clipboard:copy="userInfo.invitation_code"
           v-clipboard:success="onCopy">{{$t('MyCode')}}：{{ userInfo.invitation_code || 'IAFAED' }}</div>
      <div class="qrcode"
           id="qrcode"
           ref="qrCodeUrl"></div>
      <div class="downloadApp">—— {{$t('downloadApp')}} ——</div>
    </div>
    <van-popup v-model="open">
      <div class="name">{{$t('savePicture')}}</div>
      <img :src="imgUrl"
           alt="">
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import QRCode from 'qrcodejs2'
import html2canvas from "html2canvas"
import { posterShare } from '@/utils/jsbridge'
let timer = null
export default {
    i18n: {
      messages: {
        zh: {
          title: '邀请注册',
          MyCode: '我的邀请码',
          downloadApp: '扫码下载APP',
          savePicture: "长按图片保存到本地",
          describe: "你身边的量化专家",
          row: ['多接口 跨平台', '多策略 自定义', '多仓位 可视化', '大数据 多信号']
        },
        en: {
          title: 'Invitation to register',
          MyCode: 'My invitation code',
          downloadApp: 'Download app',
          savePicture: "Long press to save image to local",
          describe: "Quantitative experts around you",
          row: ['Multi-APIs', 'Multi-Strategies', 'Visualization', 'Big-Data']
        },
        jp: {
          title: '招待登録',
          MyCode: '私の招待番号',
          downloadApp: 'アプリをダウンロード',
          savePicture: "画像をそのままローカルに保存します。",
          describe: "あなたの身近な量子化の専門家",
          row: ['マルチインターフェース', 'マルチ戦略', '複数のポジション', 'ビッグデータ']
        },
        kr: {
        title: '등록 초대',
        MyCode: '내 초대 코드',
        downloadApp: '코드를 스캔하여 APP 다운로드',
        savePicture: "사진을 길게 눌러 로컬에 저장",
        describe: "당신 주변의 양적 전문가",
        row: ['다중 인터페이스, 교차 플랫폼', '다중 전략 사용자 정의', '다중 위치 시각화', '빅 데이터, 다중 신호']
      }
    }
  },
  data () {
    return {
      imgUrl: "",
      qrCode: "",
      open: false
    }
  },
  computed: {
    ...mapState({
      userInfo: ({ user }) => user.userInfo
    })
  },
  mounted () {
    this.getQrCode()
  },
  methods: {
    clickGeneratePicture () {
      this.$nextTick(() => {
        html2canvas(this.$refs.imageDom).then(canvas => {
          // 转成图片，生成图片地址
          this.imgUrl = canvas.toDataURL("image/png");
          this.open = true
        });
      });
    },
    getQrCode (newValue) {
      this.$store.dispatch("user/getUserInfo").then(res => {
        this.qrCode = new QRCode(this.$refs.qrCodeUrl, {
          text: res.invitation_url,
          width: 140,
          height: 140
        })
      })
    },
    onCopy () {
      this.$toast('复制成功')
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar.van-hairline--bottom{
  /deep/.van-nav-bar__content{
    .van-nav-bar__left{
      .van-icon{
        color: #ffffff;
      }
    }
    .van-nav-bar__title{
      color: #ffffff;
    }
  }
}
.van-popup{
  background: transparent;
  .name{
    font-size: 14px;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
  }
  img{
    display: block;
    width: 280px;
  }
}
.right{
  position: absolute;
  right: 15px;
  top: 13px;
  z-index: 2;
  color: #ffffff;
  font-size: 16px;
}
.poster{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 0 30px;
  min-height: 100%;
  color: #ffffff;
  background: linear-gradient(139deg, #203FFF 0%, #00B8FF 100%);
  background-image: url('./bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  .avatar-content{
    padding-top: 92px;
    .logo{
      margin-top: 45px;
      padding: 0;
      width: 59px;
      height: 59px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 3px solid #ffffff;
      box-sizing: content-box;
      img{
        width: 59px;
        height: 59px;
        display: block;
      }
    }
    .BMax{
      padding: 21px 0 10px 0;
      font-size: 41px;
      color: #FFFFFF;
    }
    .describe{
      font-size: 24px;
      color: #FFFFFF;
      letter-spacing: 2px;
    }
  }
  .van-row{
    margin-top: 45px;
    .van-col{
      position: relative;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      height: 36px;
      line-height: 36px;
      text-indent: 14px;
      &:after{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        content: "";
        background: linear-gradient(259deg, rgba(0, 0, 0, 0) 0%, #F5ECEC 100%);
        opacity: 0.46;
        transform: skew(-10deg);
        border-radius:5px;
      }
    }
  }
  .invitation_code{
    margin-top: 32px;
    height: 22px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    color: #FFFFFF;
  }
  .qrcode{
    margin: 15px auto 12px auto;
    width: 114px;
    height: 114px;
    border: 7px solid #ffffff;
    border-radius: 5px;
    background: #D8D8D8;
    box-sizing: content-box;
    overflow: hidden;
    /deep/ img{
      width: 114px;
      height: 114px;
    }
  }
  .downloadApp{
    padding-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
    line-height: 18px;
  }
}
</style>
